<!-- components/points-list/index.vue -->
<template>
  <view class="points-container">
    <!-- 积分头部 -->
    <view class="points-header">
      <view class="points-value">
        <u-icon name="https://env-00jxt1fzew48.normal.cloudstatic.cn/index/juan.png" size="52"></u-icon>
        <text class="number color-black" style="font-size: 80rpx;">40</text>
      </view>
      <view class="points-desc color-black text-sm">消费券有效期180天，记得使用哦</view>
      <button class="exchange-btn" @tap="handleExchange">获取更多</button>
    </view>

    <!-- 状态标签 -->
  <view>
  		<view>
  			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"  :active-color="'#292421'"  :bar-style="{background:'#FF1712'}" :bg-color="'#f8f8f8'"
        :inactive-color="'#292421'"  
  			 swiperWidth="750"></u-tabs-swiper>
  		</view>
  		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
  			<swiper-item class="swiper-item" v-for="(item, index) in 1" :key="index">
  				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
  				<Item :pointsList="pointsList"></Item>
  				</scroll-view>
  			</swiper-item>
        <swiper-item class="swiper-item" v-for="(item, index) in 1" :key="index">
        	<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
        	<Item :pointsList="pointsList2"></Item>
        	</scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item" v-for="(item, index) in 1" :key="index">
        	<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
        	<Item :pointsList="pointsList3"></Item>
        	</scroll-view>
        </swiper-item>
  		</swiper>
  	</view>

    <!-- 列表内容 -->
 
  </view>
</template>

<script>
  import Item from "./components/item.vue"
export default {
  components:{
    Item
  },
  data() {
    return {
      list: [{
      					name: '待使用'
      				}, {
      					name: '已使用'
      				}, {
      					name: '已过期'
      				}],
      				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      				current: 0, // tabs组件的current值，表示当前活动的tab选项
      				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      currentTab: 0,
      tabs: ['待使用', '已使用', '已过期'],
      pointsList: [
        {
          title: '消费券红包',
          date: '2025-12-29 13:21:01',
          value: '+20',
          type: 'add'
        },
        {
          title: '消费券红包',
          date: '2025-12-29 13:21:01',
          value: '+20',
          type: 'add'
        }
      ],
      pointsList2: [
        {
          title: '消费券红包',
          date: '2025-12-29 13:21:01',
          value: '-20',
          type: 'jian'
        },
        {
          title: '消费券红包',
          date: '2025-12-29 13:21:01',
          value: '-20',
          type: 'jian'
        }
      ],
      pointsList3: [
        {
          title: '消费券红包',
          date: '2025-12-29 13:21:01',
          value: '20',
          type: 'guoqi'
        },
        {
          title: '消费券红包',
          date: '2025-12-29 13:21:01',
          value: '20',
          type: 'guoqi'
        }
      ]
    }
  },
  methods: {
    switchTab(index) {
      this.currentTab = index
      // 这里可以根据tab切换加载不同数据
    },
    handleExchange() {
      uni.showToast({
        title: '兑换功能开发中',
        icon: 'none'
      })
    },
    tabsChange(index) {
    				this.swiperCurrent = index;
    			},
    			// swiper-item左右移动，通知tabs的滑块跟随移动
    			transition(e) {
    				let dx = e.detail.dx;
    				this.$refs.uTabs.setDx(dx);
    			},
    			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    			// swiper滑动结束，分别设置tabs和swiper的状态
    			animationfinish(e) {
    				let current = e.detail.current;
    				this.$refs.uTabs.setFinishCurrent(current);
    				this.swiperCurrent = current;
    				this.current = current;
    			},
    			// scroll-view到底部加载更多
    			onreachBottom() {
    				
    			}
  }
}
</script>

<style lang="scss" scoped>
/deep/swiper{
  height: 800rpx;
}
.points-container {
  background: #f8f8f8;
  min-height: 100vh;
}

.points-header {

  padding: 40rpx 30rpx;
  text-align: center;
  position: relative;
}

.points-value {
  margin-bottom: 20rpx;
}



.number {

  font-weight: bold;

  margin-left: 8rpx;
}

.points-desc {

  margin-bottom: 30rpx;
}

.exchange-btn {
  position: absolute;
  right: -20rpx;
  top: 100rpx;
  font-size: 24rpx;
  color: #fff;
  background:#FF625F;
  border: 1rpx solid #ff4444;
  border-radius: 30rpx;
  padding: 10rpx 30rpx;
  line-height: 1.5;
  
}

.tab-bar {
  display: flex;
  background: #fff;
  padding: 20rpx 0;
  margin-top: 20rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #333;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #ff4444;
}

.list-container {
  padding: 20rpx 30rpx;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.item-date {
  font-size: 24rpx;
  color: #999;
}

.item-value {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.value-add {
  color: #ff4444;
}
</style>